<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <script src="preview/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <script src="preview/js/countUp.js"></script>
    <title>总到馆人数</title>
    <style>
        .come{
            width:9.4rem;
            height: auto;
            /*background-color: #163a72;*/
        }
        .dg{
            margin-bottom:0.1rem;
            padding:0 0.2rem 0 0.1rem;
            display: flex;
            font-size:0.24rem;
            color:#1981ff;
        }
        .dg:last-of-type{
            margin-bottom:0;
        }
        .dg .lbar-warp {
            flex: 1;
            float: left;
            /*width: 4rem;*/
            height: 0.07rem;
            margin: 0.14rem 0;
            background: #074568;
            -webkit-border-radius: 0.1rem;
            -moz-border-radius:  0.1rem;
            border-radius:  0.1rem;
            position: relative;
            box-shadow: 0.01rem 0.01rem 0.05rem #fff;
        }
        .timer {
            position: absolute;
            width: 0;
            bottom: -0.03rem;
            height: 0.12rem;
            /*background: #3c93f4;*/
            background: -webkit-linear-gradient(left, #1367cd , #4097f8); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, #1367cd, #4097f8); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, #1367cd, #4097f8); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #1367cd , #4097f8); /* 标准的语法（必须放在最后） */
            -webkit-border-radius: 0.06rem;
            -moz-border-radius:  0.06rem;
            border-radius: 0.06rem;
            transition: width 2s;
            -moz-transition: width 2s;
            -webkit-transition: width 2s;
            -o-transition: width 2s;
            text-align: center;
            font-size: 0.24rem;
        }
        .month_num{
            /*position: absolute;*/
            font-size:0.16rem;
            margin-top: -0.2rem;
        }
        .dg_xy {
            width:1.75rem;
            text-align: right;
            float: left;
            margin:0.01rem 0.3rem 0 0;
        }
        .bot_title{
            margin-bottom:0.3rem;
        }
    </style>
</head>
<body>
<div class="come">
    <!--<div class="module-title ycenterbox"><img src="preview/img/listimg.png" /><span class="section_name" data-key="came_count_str">总到馆人数</span></div>-->
    <div class="bot_title xycenterbox">
        <img src="preview/img/no1.png" alt="" class=""/>
        <p class="p1">总到馆人数</p>
        <p class="p2 one_p2">(总数:<span class="dg_total">563658999</span>&nbsp;<span class="num_begin">数组自<span class="year">2016</span>年<span class="year">1</span>月<span class="year">1</span>日起)</span></p>
    </div>
    <div class="comeContent">
        <div class="b-content-up">
            <div class="dg1 dg clearfix">
                <p class="dg_xy">平桥乡</p>
                <div class="lbar-warp"><div class="default1 timer"><div class="month_num">1236545</div></div></div>
            </div>
            <div class="dg2 dg clearfix">
                <p class="dg_xy">分路口镇</p>
                <div class="lbar-warp"><div class="default2 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg3 dg clearfix">
                <p class="dg_xy">苏埠镇</p>
                <div class="lbar-warp"><div class="default3 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg4 dg clearfix">
                <p class="dg_xy">南楼村农家书屋</p>
                <div class="lbar-warp"><div class="default4 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">单王乡</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">韩摆渡镇</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">独山镇</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">江家店镇</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">青山乡</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">狮子岗乡</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">顺河镇</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">罗集乡</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">石板冲乡</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">固镇镇</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">石婆店镇</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">新安镇</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">西市街道</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">城南镇</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">西河口乡</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">丁集镇</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">鼓楼街道</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">徐集镇</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>
            <div class="dg5 dg clearfix">
                <p class="dg_xy">小华山街道</p>
                <div class="lbar-warp"><div class="default5 timer"><div class="month_num"></div></div></div>
            </div>

        </div>
    </div>
</div>
</body>
<script>
    var chart_timer=null,waitCountNum=0;
    var clickArr=[
        {"total":5000,"comeNum":1256},
        {"total":5000,"comeNum":2256},
        {"total":5000,"comeNum":3356},
        {"total":5000,"comeNum":2569},
        {"total":5000,"comeNum":1596},
        {"total":5000,"comeNum":1596},
        {"total":5000,"comeNum":3652},
        {"total":5000,"comeNum":2563},
        {"total":5000,"comeNum":1425},
        {"total":5000,"comeNum":896},
        {"total":5000,"comeNum":4561},
        {"total":5000,"comeNum":3658},
        {"total":5000,"comeNum":1963},
        {"total":5000,"comeNum":2563},
        {"total":5000,"comeNum":2103},
        {"total":5000,"comeNum":4123},
        {"total":5000,"comeNum":999},
        {"total":5000,"comeNum":1863},
        {"total":5000,"comeNum":1365},
        {"total":5000,"comeNum":896},
        {"total":5000,"comeNum":4100},
        {"total":5000,"comeNum":3542},
        {"total":5000,"comeNum":1596}
    ];
    window.onresize = function(){
        getRem(100,940);
    };
    window.onload = function(){
        getRem(100,940);
        function move(){
            $.each(clickArr,function(i,e){
                /////条涨
//                $('.lbar-warp .timer:eq('+i+')').width(0).animate({
//                    width : clickArr[i].comeNum/clickArr[i].total*100+"%"
//                },2000,"swing");

                /////条涨
                $('.lbar-warp .timer:eq('+i+')').hide();
                $('.lbar-warp .timer:eq('+i+')').width(0);
                $('.lbar-warp .timer:eq('+i+')').show();
                $('.lbar-warp .timer:eq('+i+')').width(clickArr[i].comeNum/clickArr[i].total*100+"%");

                ////数字变化
                new CountUp($('.lbar-warp .month_num:eq('+i+')'), 0, clickArr[i].comeNum, 0, 2).start();

            });
        }
        move();
        waitTime();
        function waitTime(){
            if(!!window.chart_timer)	cancelAnimationFrame(window.chart_timer);
            if(waitCountNum >= 900){///15秒重复一次动效
                waitCountNum = 0;
                move();
            }
            waitCountNum++;
            window.chart_timer = requestAnimationFrame(waitTime);
        }
    }
</script>
</html>